﻿
@{
    ViewBag.Title = "预约体检时间";
    Layout = "~/Views/Shared/_MobileLayout.cshtml";
}

@section Header{
    <link href="~/Asset/stepwizard.css" rel="stylesheet" />

<link href="~/Asset/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<script src="~/Asset/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script src="~/Asset/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
}

<input type="hidden" id="orderid" value="@ViewBag.OrderId" />
<div class="stepwizard">
    <div class="stepwizard-row">
        <div class="stepwizard-step">
            <button type="button" class="btn btn-default btn-circle">1</button>
            <p>核对订单</p>
        </div>
        <div class="stepwizard-step">
            <button type="button" class="btn btn-default btn-circle">2</button>
            <p>提交订单</p>
        </div>
        <div class="stepwizard-step">
            <button type="button" class="btn btn-primary btn-circle">3</button>
            <p><strong>预约时间</strong></p>
        </div>
    </div>
</div>

<ul class="list-group info_1">
    <li class="list-group-item list-group-item-info">
        <span class="fa fa-info"></span> <strong>填写体检人预约信息</strong>
    </li>
    <li class="list-group-item">
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control name" placeholder="请输入姓名">
            </div>
        </div>
        <div class="form-group">
            <label for="phone" class="col-sm-2 control-label">手机号码</label>
            <div class="col-sm-10">
                <input type="text" class="form-control phone" placeholder="请输入手机号">
            </div>
        </div>

        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control datetimepicker">
            </div>
        </div>
        @*<div class="form-group">
            <label for="name" class="col-sm-2 control-label">性别</label>
            <div class="col-sm-10">
                <input type="radio" name="gender" value="0" checked /><span>男</span>
                <input type="radio" name="gender" value="1" /><span>女</span>
            </div>
        </div>*@
    </li>
</ul>
<a href="#" id="add" class="btn btn-info btn-block" data-current="1" date-total="3">增加体检人信息</a>
<a href="#" id="submit" class="btn btn-info btn-block">确认 <span class="glyphicon glyphicon-circle-arrow-right"></span></a>

@section Footer{
    <script type="text/javascript">
        $(function () {
            var ops = {
                format: 'yyyy-mm-dd hh:mm',
                weekStart: 1,
                startDate: new Date(), //开始时间，在这时间之前都不可选
                //endDate: new Date(),//结束时间，在这时间之后都不可选
                language: 'zh-CN',
                autoclose: true
            };
            $('.datetimepicker').datetimepicker(ops);
            
            canAdded();
            $("#add").click(function () {
                var current = $(this).attr("data-current");
                var total = $(this).attr("date-total");
                if(current<total)
                {
                    var info = $(".info_1");
                    var clone = info.clone();
                    current = parseInt(current) + 1;
                    clone.addClass("info_"+current);
                    clone.removeClass("info_1");
                    info.after(clone);
                    $(this).attr("data-current", current);
                    $(this).text("增加体检人信息（"+current+"/"+total+"）");
                }
                $('.datetimepicker').datetimepicker('remove');
                $('.datetimepicker').datetimepicker(ops);
                canAdded();
            });

            $("#submit").click(function () {
                //取值（遍历）
                var uls = $("ul");
                var data = [];
                for (var i = 0; i < uls.length; i++) {
                    var ul=$(uls[i]);
                    var name = ul.find(".name").val();
                    var phone = ul.find(".phone").val();
                    var time = ul.find(".datetimepicker").val();
                    //var gender = ul.find("input[name='gender'][checked]").val();
                    data[i] = {};
                    data[i].name=name;
                    data[i].phone = phone;
                    data[i].time=time;
                    //data[i].gender=gender;
                }

                var orderid = $("#orderid").val();

                //提交数据
                $.ajax({
                    url:'@Url.Action("Appointment", "Mobile")',
                    type:'post',
                    data: { orderid: orderid, info: data },
                    success: function (data) {
                        if(data.Code==1)
                        {
                            window.location.href = '@Url.Action("AppointmentResult", "Mobile")';
                        }
                    }
                });
            });
            });

        function canAdded() {
            var add = $("#add");
            var current = add.attr("data-current");
            var total = add.attr("date-total");
            if(current>=total)
            {
                add.attr({ "disabled": "disabled" });
            }
        }
    </script>
}
